<script setup lang="ts">
import { ref } from "vue";
import baseDialog from "./components/baseDialog.vue";
import asyncDialog from "./components/asyncDialog.vue";

interface PropType {
  isDoc?: boolean; // 是否为文档系统
}

withDefaults(defineProps<PropType>(), {
  isDoc: false,
});

const visible = ref<boolean>(false);
const handleOpenBase = () => {
  visible.value = true;
};

const asyncRef = ref();
const loading = ref<boolean>(false);
const handleOpenAsync = async () => {
  try {
    loading.value = true;
    const data = await asyncRef.value.open();
    console.log(data);
  } catch (err) {
    console.warn(err);
  } finally {
    loading.value = false;
  }
};
</script>

<template>
  <div class="page-container w-full h-full">
    <xt-row>
      <xt-col :xs="24" :md="12" :lg="isDoc ? 12 : 8">
        <xt-card header="基础" class="card-container">
          <xt-button @click="handleOpenBase">打开弹窗</xt-button>
        </xt-card>
      </xt-col>

      <xt-col :xs="24" :md="12" :lg="isDoc ? 12 : 8">
        <xt-card header="异步化" class="card-container">
          <xt-button @click="handleOpenAsync" :loading="loading"
            >打开弹窗</xt-button
          >
        </xt-card>
      </xt-col>
    </xt-row>

    <baseDialog v-model="visible" />
    <asyncDialog ref="asyncRef" />
  </div>
</template>

<style lang="scss">
.page-container {
  .card-container {
    @apply m-[10px];

    .circle-container {
      @apply w-[50px] h-[50px] bg-[black] rounded-[50%];
    }
  }
}
</style>
